Liste des propriétés CSS 


Cette page est une liste non exhaustive des propriétés CSS qui existent, le but étant de réunir sur une même page un maximum de propriétés CSS. Cette 
liste se concentre sur les principales propriétés, le but n'est pas de toutes les archiver … 


Propriétés de formatage de texte 


Police, taille et décorations 


Type | Nom | Valeurs possibles 


Indiquer les noms de polices possibles par ordre de préférence : font-family:police1, police2, police3; 

Utilisez des guillemets si le nom de la police comporte des espaces. Essayez de toujours mettre comme dernière police possible 
"serif" ou "sans-serif". 

Exemple : font-family: "Arial Black", Arial, Verdana, serif; 


Nom de 


police font-family 


Plusieurs unités sont possibles : 
e px (pixels) 


x-large : très grand 
xx-large : très très grand 


e % (pourcentage, 100% = normal) 
e em (taille relative, 1.0 = normal) 
e œx (taille relative à la hauteur de la lettre "x". 1.0 = normal) 
: e nom de taille : 
u e font-size o xx-small : très très petit 

o x-small : très petit 

o small: petit 

o medium : moyen 

o large : grand 

O 

O 


bold : gras 

bolder : plus gras 

lighter : plus fin 

normal : pas gras (par défaut) 


Gras font-weight 


italic : italique 
ltalique font-style oblique : autre façon de mettre en italique 
normal : normal (par défaut) 


underline : souligné 

overline : ligne au-dessus 
Décoration  |text-decoration |line-through : barré 

blink : clignotant 

none : normal (par défaut) 
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_ Type | Nom | Valeurs possibles 


Petites ne Varna small-caps : petites capitales 
capitales normal : normal (par défaut) 


uppercase : tout mettre en majuscules 
lowercase : tout mettre en minuscules 
capitalize : début des mots en majuscules 
none : normal (par défaut) 


letter-spacing : permet d'ajuster l'espace entre chaque lettres. Valeurs possibles : "normal", ou une unité de longueur. 
text-shadow : permet de créer une ombre au texte. Valeurs possibles : "none", une couleur et / ou une longueur. 
word-spacing : permet d'ajuster l'espace entre chaque mot. Valeurs possibles : "normal", ou une longueur. 

direction : permet de choisir le sens du texte. Valeurs possibles : "ltr" de gauche à droite, "rtl" de droite à gauche. 


Indiquez dans n'importe quel ordre des valeurs possibles pour font-weight, font-style, font-size, font-variant, font-family. Attention 


Raccourcis exception : le nom de la police (font-family) doit être placé en dernier dans la liste dans tous les cas. 
Exemple : font: bold, 16px, Arial; /*Cela mettra votre texte en gras, 16 pixels, Arial.*/ 


text-transform 


Autres … 


Alignement 


| Type | Propriété | Valeurs possibles | 


left : à gauche (par défaut) 

center : centré 

right : à droite 

justify : texte justifié (prend toute la largeur de la page) 


Alignement horizontal|text-align 


A utiliser dans des cellules de tableau. 
top : en haut 

middle : au milieu 

bottom : en bas 


Alignement vertical  |vertical-align 


Hauteur de ligne line-height Indiquer une valeur en pixels (px) ou en pourcentage (%) 
Indiquez une valeur en pixels (px) pour définir l'alinéa de vos paragraphes. 
Vos paragraphes commenceront avec le retrait que vous avez indiqué. 
normal : le passage à la ligne est automatique (par défaut) 
Césure white-space nowrap : pas de passage à la ligne automatique, à moins qu'une balise xHTML comme <br /> ne soit présente. 
pre : le passage à la ligne se fait tel que le texte a été saisi dans le code source. 


text-indent 


Ainéa 


Propriétés de couleur et de fond 
Couleur 


Type Propriété Valeurs possibles 
Couleur de texte] color Indiquer une couleur avec l'une des méthodes suivantes : 
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Valeurs possibles 


En tapant le nom de la couleur en anglais (black, blue, green, white, red...). 
En indiquant la couleur en hexadécimal (#CC48A1) 
En indiquant la couleur en RGB : rgb (128, 255, 0) 

Couleur de fond |background-color |Même fonctionnement que color. Cela définit cette fois la couleur de fond du texte 


Image de fond 

| Type | Propriété | Valeurs possibles | 
Indiquer l'url de l'image (notation absolue ou relative) 

background-image:url("images/fond.png"); 

fixed : le fond reste fixe quand on descend plus bas sur la page 

scroll : le fond défile avec le texte (par défaut) 


repeat : le fond se répète (par défaut) 

repeat-x : le fond ne se répète que sur une ligne, horizontalement 
repeat-y : le fond ne se répète que sur une colonne, verticalement 
no-repeat : le fond ne se répète pas, il n'est affiché qu'une fois 


2 façons de faire : 
e En notant une distance en px ou %, par rapport au coin en haut à gauche. 
background-position:50px 200px; /* 50 px à droite, 200px en bas */ 
e En utilisant des valeurs prédéfinies, une pour la verticale et une pour l'horizontale : 
top : en haut, verticalement 
center : au milieu, verticalement 
Position du fond |background-position bottom : en bas, verticalement 


Image de fond background-image 


Fond fixé 


background-attachment 


Répétition du fond|background-repeat 


left : à gauche, horizontalement 
center : au centre, horizontalement 
right : à droite, horizontalement 


Exemple : background-position : bottom right; /* en bas à droite */ 


Indiquer une ou plusieurs valeurs issues des propriétés background-image, background-repeat, background- 
attachment, background-position. 

L'ordre des valeurs n'a pas d'importance et vous n'êtes pas obligés de mettre toutes les valeurs de ces propriétés 
(au moins une suffit) 

Exemple : background:url("images/fond.png") no-repeat fixed top right; 

/* Le fond fond.png reste affiché en haut à droite de l'écran et n'est pas répété. */ 


Raccourci background 
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Propriétés des boîtes 
Dimensions 


Valeurs possibles 
aeu en px, %, ou encore "auto" (valeur par défaut, la largeur dépendra du texte à l'intérieur) 


[Largeur minimale an width Re une valeur, en pixels par exemple. 


[Largeur maximale |max-width lidem | 
Hauteur minimale |min-height lidem | 


Hauteur maximale |max-height |Idem 


Marges extérieures 


Valeurs possibles 


[Marge en haut |margin-top [Indiquer une valeur comme 20px, 1.5em... | 
sae à margin-left Idem 

gauche 

Marge à droite |margin-right Idem 

Marge en bas |margin-bottom Idem 


Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change : 
e {1 valeur : ce sera la marge pour le haut, le bas, la gauche et la droite 
e 2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite 
Raccourci margin e 3 valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la 
marge du bas 
e _4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche. 
Exemple : margin:20px 5px; /* 20px de marge en haut et en bas, 5px à gauche et à droite */ 


Marges intérieures 

| Type | Propriété | Valeurs possibles | 
Marge intérieure en haut | padding-top Indiquer une valeur comme 20px, 1.5em... | 
[Marge intérieure à gauche| padding-left lidem | 
Marge intérieure à droite |padding-right |Idem 

Marge intérieure en bas |padding-bottom|Idem 

Raccourci padding Idem margin 
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Bordures 


Type Valeurs possibles 
Epaisseur de la bordure| border-width |Indiquer une valeur en px. 
Couleur de la bordure Indiquer une valeur de couleur. 


none : pas de bordure (par défaut) 

hidden : bordure cachée 

solid : ligne pleine 

double : ligne double (nécessite une taille de bordure de 3px minimum) 
border-style  |dashed : en tirets 

dotted : en pointillés 

inset : effet 3D "enfoncé" 

outset : effet 3D "surélevé" 

ridge : autre effet 3D 


Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche. 


Bordure à gauche border-left L'ordre n'a pas d'importance. 
Exemple : border-left: 2px inset blue; /* Bordure bleue de 2px avec effet 3D "enfoncé" */ 
Bordure en haut border-top Idem 
Bordure à droite border-right  |ldem 
[Bordure en bas |border-bottom|Idem | 
[Raccourci [border indiquera l'apparence des bordures en haut, à droite, en bas et à gauche. | 


Propriétés de positionnement et d'affichage 

Affichage 

| Type IPropriété| Valeurs possibles 
none : l'élément ne sera pas affiché 

block : l'élément devient de type "block" (bloc, comme <p>) 


inline : l'élément devient de type "inline" (en ligne, comme <strong>) 
list-item : l'élément devient de type "élément de liste à puce" (comme <li>) 


hidden : masqué 
visible : visible (par défaut) 


Type d'élément  |display 


AIDER HSM display:none; fait complètement disparaître l'élément, tandis que visibility:hidden; masque l'élément, qui continue quand même à 
prendre de la place sur l'écran. 
visible : tout l'élément sera affiché (par défaut). 

Limiter les T, hidden : l'élément sera coupé s'il dépasse les limites définies par height et width. On ne pourra pas voir la partie du texte coupée. 


dimensions scroll : tout comme hidden, l'élément sera coupé s'il dépasse les limites. Toutefois, cette fois le navigateur ajoutera des barres de 
défilement pour qu'on puisse voir la suite du texte. 
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Valeurs possibles 


auto : c'est le navigateur qui décide d'ajouter des barres de défilement ou pas en fonction des cas. Bien souvent, utiliser cette 
valeur revient à utiliser la valeur "scroll". 


Positionnement 


Valeurs possibles 


left : flottant à gauche 
Flottant float right : flottant à droite 
none : pas de flottant (par défaut) 


left : supprime l'effet d'un flottant à gauche précédent 

right : supprime l'effet d'un flottant à droite précédent 

both : supprime l'effet d'un flottant précédent, qu'il soit à gauche ou à droite 
none : pas de suppression de l'effet du flottant (par défaut) 


absolute : position absolue par rapport au coin en haut à gauche 

fixed : position fixe (fonctionne comme la position absolue). L'élément reste à sa position même quand on descend plus bas 
position |dans la page. 

relative : position relative, par rapport à la position "normale" de l'élément 

static : positionnement normal (par défaut) 


Stopper un flottant clear 


Type de 
positionnement 


Valeur en px, %, em... A utiliser pour un positionnement absolu, fixe ou relatif. | 


Position par rapport 
k haut Op 
Position par rapport bottom idem 
au bas 
Position par rapport à 
gauche left Idem 
Position par rapport à |. 
RE right Idem 
Par exemple en cas de positionnement absolu, si 2 éléments se chevauchent, z-index permet d'indiquer quel élément doit être 

io a a AT affiché au-dessus de l'autre. Indiquez un nombre. Plus ce nombre est élevé, plus l'élément sera affiché en avant. 

9 Exemple, si vous avez 2 éléments positionnés en absolus avec un z-index : 10 pour l'un et z-index : 20 pour l'autre, c'est celui 


qui a un z-index de 20 qui sera affiché par-dessus. 


Propriétés des listes 


Valeurs possibles 


e Pour les listes non ordonnées (<ul>) : 
o disc : un disque noir (par défaut). 
o circle : un cercle. 
o square : un carré. 


Type de liste list-style-type 
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Valeurs possibles 


o none : aucune puce ne sera utilisée. 
e Pour les listes ordonnées (<ol>) : 
decimal : des nombres 1, 2, 3, 4, 5... (par défaut) 
decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05...). Ne fonctionne pas sur 
Internet Explorer 
upper-roman : numérotation romaine, en majuscules (1, Il, I, IV, V...) 
lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...) 
upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...) 
lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...) 
lower-greek : numérotation grecque. Ne fonctionne pas sur Internet Explorer 


Ea |. Hist-style- inside : sans retrait 
FRERE en sizi position outside : avec retrait (par défaut) 
Puce list-style- Indiquer l'url de l'image qui servira de puce. 
personnalisée image Exemple : list-style-image: url("images/puce.png"); 


Vous pouvez réunir les valeurs de list-style-type, list-style-position et list-style-image. Vous n'êtes pas obligés de mettre toutes 
Raccourci list-style les valeurs, et l'ordre n'a pas d'importance. 
Exemple : list-style: inside square; 


Autres propriétés 

| Type | Propriété | Valeurs possibles 
a:link : lien non-visité 

Les pseudo- a:visited : lien visité 

classes d'ancre a:hover : lien survolé 
a:active : lien activé 


scrollbar-3dlight-color : permet de modifier la couleur pour les effets de relief. Valeur possible : une couleur. 
scrollbar-arrow-color : permet de modifier la couleur pour les pointeurs de défilement. Valeur possible : une couleur. 
scrollbar-base-color : permet de modifier la couleur de la surface de la barre de défilement. Valeur possible : une 


couleur. 
scrollbar-darkshadow-color : permet de modifier la couleur pour les ombres. Valeur possible : une couleur. 
Les barres de scrollbar-face-color : permet de modifier la couleur de la surface de la barre de défilement. Valeur possible : une 
défilement : scrollbar couleur. 
scrollbar-highlight-color : permet de modifier la couleur pour le bord haut et le bord gauche. Valeur possible : une 
couleur. 
scrollbar-shadow-color : permet de modifier la couleur pour le bord droit et le bord du bas. Valeur possible : une 
couleur. 


scrollbar-track-color : permet de modifier la couleur pour la barre de défilement non cachée par le pointeur de 
défilement. Valeur possible : une couleur. 
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